<template>
	<view class="container">
		<view class="title">
			<text>意见描述</text>
		</view>
		<view class="tui-cells">
			<textarea class="tui-textarea" placeholder="我希望加入XXXX功能..." maxlength="500" placeholder-class="phcolor"
			 v-model="desc" />
			<view class="textarea-counter">{{desc.length}}/500</view>
	    </view> 
	    <view class="tui-ptop">
			<button type="warn" @click="submit" >提交反馈</button> 
	    </view>
		
		<view style="color: #e61d1d;margin-top: 30px;line-height:20px;" v-if="feedback.length">我的反馈意见({{feedback.length}})</view>
		<view style="height: calc(100% - 680rpx);overflow: auto;padding: 10px 0;">
			<view class="drawer">
				<view class="drawer-content">
					<view class="drawer-content-list" v-for="(list,list_i) in feedback" :key="list_i"> 
						<view style="font-weight:bold;">
							<text style="margin-right:10px;color: #b11212;" v-if="list.is_handle=='未处理'">{{list.is_handle}} </text>  
							<text style="margin-right:10px;" v-if="list.is_handle!='未处理'">{{list.is_handle}} </text>  
							<text>{{list.create_time}}</text>
						</view>
						<view> {{list.feedback}} </view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				desc:"",
				email:"",
				feedback:[],
				rightDrawer: false
			}
		},
		onLoad(options) {
			this.getMyData();
		},
		methods: {
			// 提交
			submit(){
				if(!this.desc)  return this.$util.msg("请输入意见描述");
				if(this.desc.length<8)  return this.$util.msg("意见描述必须8个或以上字符");
				if(this.desc.length>500)  return this.$util.msg("意见描述不能超过500个字符");
				this.$request("/app/v1/feedback/insert",{
					feedback:this.desc
				}).then(res=>{
					this.desc = "";
					this.email = "";
					this.$util.msg("提交成功!");
					setTimeout(()=>{
						this.getMyData();
					},1000)
				});
			},
			// 我的反馈意见数据
			getMyData(){
				this.$request("/app/v1/feedback/getMyData",{}).then(res=>{
					this.feedback = res.data;
				});
			},
			// 点击我的反馈意见
			myFeedback(){
				this.rightDrawer = true;
			},
			// 关闭
			closeDrawer(){
				this.rightDrawer = false;
			}
		}
	}
</script>

<style lang="scss">
page {
  background: #fff;
  height: 100%;
}

.container {
	background-color: #fff;
	padding: 30rpx;
	width: 100%;
	height: calc(100% - 60rpx);
}

.title {
  font-size: 30rpx;
  color: #666;
  padding-bottom: 32rpx;
}

.tui-cells {
  border: 1rpx solid #e6e6e6;
  border-radius: 4rpx;
  height: 280rpx;
  box-sizing: border-box;
  padding: 20rpx 20rpx 0 20rpx;
}

.tui-textarea {
  height: 210rpx;
  width: 100%;
  color: #666;
  font-size: 28rpx;
}

.pholder {
  color: #ccc;
}

.textarea-counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  height: 40rpx;
  line-height: 40rpx;
  padding-top: 4rpx;
}

.top64 {
  margin-top: 64rpx;
}

.tui-input {
  font-size: 30rpx;
  height: 88rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 4rpx;
  padding: 0 25rpx;
  box-sizing: border-box;
}
.tui-ptop{
	padding-top: 80rpx;
}

.drawer{
	width:100%;
	height: 100%;
	overflow: auto;
	.drawer-content{
		overflow: auto;
		height: 100%;
	}
	.drawer-content .drawer-content-list{
		background:#f1f1f1; 
		padding: 15px;
		border-radius: 10px;
		margin-bottom:10px;
	}
}

</style>
